<script setup>
import $bus from "../../utils/bus";
import { onMounted, ref } from "vue";
import { getPageTradeOrderDetailApi } from "@/api/tradeOrder";
// ---------------------------------------------------------------------获取查询刷新---------------------------------------------------------------------
const dataList = ref([]);
const queryPageParams = ref({
  pageNum: 1,
  pageSize: 10,
  orderCode: "",
  goodsName: "",
  dateTime: [
    new Date().toISOString().split("T")[0], // 今天
    new Date().toISOString().split("T")[0], // 今天
  ],
});

const total = ref(0);
const getData = async () => {
  console.log(queryPageParams.value);
  const res = await getPageTradeOrderDetailApi(queryPageParams.value);
  dataList.value = res.data.list;
  total.value = res.data.total;
};
const getPage = () => {
  getData();
};
const clear = () => {
  queryPageParams.value.pageNum = 1;
  queryPageParams.value.pageSize = 10;
  queryPageParams.value.orderCode = "",
  queryPageParams.value.goodsName = "",
  queryPageParams.value.dateTime = [
      new Date().toISOString().split("T")[0], // 今天
      new Date().toISOString().split("T")[0], // 今天
    ];
  getData();
};
const handlePageChange = () => {
  getData();
};

//---------------------------------------------------------------------获取标题事件---------------------------------------------------------------------
const titleData = ref({
  titleFir: "贸易数据",
  titleSec: "订单信息",
});
onMounted(() => {
  $bus.emit("title-info", titleData.value);
  getData();
});
</script>
<template>
  <el-card>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="订单号">
        <el-input placeholder="请输入订单号" v-model="queryPageParams.orderCode" />
      </el-form-item>
      <el-form-item label="商品名称">
        <el-input placeholder="请输入商品名称" v-model="queryPageParams.goodsName" />
      </el-form-item>
      <el-form-item label="收货时间">
        <el-date-picker
          v-model="queryPageParams.dateTime"
          type="daterange"
          range-separator="To"
          start-placeholder="Start date"
          end-placeholder="End date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item>
        <el-button icon="Search" type="primary" @click="getPage()">查询</el-button>
        <el-button icon="RefreshRight" type="info" @click="clear()">重置</el-button>
        <el-button icon="Edit" type="danger" @click="refresh()">刷新</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <el-card>
    <el-table
      :data="dataList"
      stripe
      fit
      default-expand-all
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      scrollbar-tabindex
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column width="55" type="index" label="序号"></el-table-column>
      <el-table-column width="150" label="收货日期" prop="receiveTime"></el-table-column>
      <el-table-column width="150" label="订单号" prop="orderDetailSerialNo"></el-table-column>
      <el-table-column width="150" label="自定义编码" prop="orderDetailSkuCustomizeCode"></el-table-column>
      <el-table-column width="150" label="商品名" prop="orderDetailSkuName"></el-table-column>
      <el-table-column width="150" label="一级分类名" prop="orderDetailCategoryFirName"></el-table-column>
      <el-table-column width="150" label="二级分类名" prop="orderDetailCategorySecName"></el-table-column>
      <el-table-column width="150" label="出库数" prop="orderDetailOutstockUnitQuantity"></el-table-column>
      <el-table-column width="150" label="验货数" prop="orderDetailAcceptValueQuantity"></el-table-column>
      <el-table-column width="150" label="下单数" prop="orderUnitQuantity"></el-table-column>
      <el-table-column width="150" label="单价" prop="orderDetailFeePrice"></el-table-column>
      <el-table-column width="150" label="参考成本" prop="orderDetailCost"></el-table-column>
      <el-table-column width="150" label="下单金额" prop="orderDetailOrderPrice"></el-table-column>
      <el-table-column width="150" label="出库金额" prop="orderDetailOutstockPrice"></el-table-column>
      <el-table-column width="150" label="分拣状态" prop="orderDetailSortingStatus"></el-table-column>
      <el-table-column width="150" label="客户名" prop="orderDetailReceiveCustomerName"></el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="queryPageParams.pageNum"
      v-model:page-size="queryPageParams.pageSize"
      :page-sizes="[10, 50, 100, 200]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="+total"
      @change="handlePageChange"
    />
  </el-card>


</template>

<style scoped lang="scss"></style>
